import React, { useEffect, useState } from 'react';
import { Form, Input, Select, Dialog, Radio } from 'tdesign-react';
import { JupiterUser, JupiterUserRole } from '../../../types/userTypes';
import { JupiterRole } from '../../../types/roleTypes';

const { FormItem } = Form;
const { Option } = Select;
const { Group: RadioGroup } = Radio;

interface Props {
  visible: boolean;
  onClose: () => void;
  onSubmit: (data: Partial<JupiterUserRole>) => void;
  initialData?: Partial<JupiterUser>;
  selectedRoles: string[];
  options: JupiterRole[];
}
export default function UserRoleForm({
  visible,
  onClose,
  onSubmit,
  initialData = {},
  selectedRoles = [],
  options = [],
}: Props) {
  const [form] = Form.useForm();
  useEffect(() => {
    if (visible) {
      form.reset();
    } else {
    }
  }, [visible, initialData, form, selectedRoles, options]);

  return (
    <Dialog
      closeOnOverlayClick={false}
      header={'分配角色'}
      visible={visible}
      onClose={onClose}
      onConfirm={() => form.submit()}
      width={600}
    >
      <Form
        form={form}
        resetType="initial"
        layout="vertical"
        onSubmit={(context) => {
          const { fields } = context as unknown as { fields: Partial<JupiterUserRole> };
          fields.userUuid = initialData.uuid;
          onSubmit(fields);
        }}
      >
        <div className="grid grid-cols-2 gap-6">

          <FormItem label="选择角色" name="roleUuids" initialData={selectedRoles}>
            <Select
              multiple
              placeholder="请选择角色"
              style={{ width: '100%' }}
              options={options}
              minCollapsedNum={3}
              keys={{ value: 'uuid', label: 'name' }}
            // collapsedItems={renderCollapsedItems}
            // size={size}
            // disabled={disabled}
            // readonly={readonly}
            />
          </FormItem>
        </div>
      </Form>
    </Dialog >
  );
}
